<%@ page language="java" contentType="text/html; charset=utf-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
	<title>用户注册</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<link type="text/css" rel="stylesheet" href="css/bootstrap.css">
	<link type="text/css" rel="stylesheet" href="css/style.css">
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/bootstrap.min.js"></script>
	<style type="text/css">
		.pwd{
			border: 1px solid #555;
			outline-color:#FD9F3E;
			width: 96%;
			font-size: 1em;
			padding: 0.5em;
		}
	</style>
</head>
<body>

	<jsp:include page="header.jsp"/>
	
	<!--account-->
	<div class="account">
		<div class="container">
			<div class="register">
				<c:if test="${msg!=null}"><div class="alert alert-danger">${msg}</div></c:if>
				<form action="register" method="post" onsubmit="return checkpassword()">
					<div class="register-top-grid">
						<h3>注册新用户</h3>
						<div class="input">
							<span>用户名 <label style="color:red;">*</label></span>
							<input type="text" name="username" placeholder="请输入用户名" required="required"> 
						</div>
						<div class="input">
							<span>密码 <label style="color:red;">*</label></span>
							<input id="pw1" type="password" name="password" placeholder="请输入密码" required="required" class="pwd">
						</div>
						<div class="input">
							<span>再输一次密码 <label style="color:red;">*</label></span>
							<input id="pw2" type="password" name="password2" placeholder="请输入密码" required="required" class="pwd">
						</div>
						<div class="input">
							<span>收货人<label></label></span>
							<input type="text" name="name" placeholder="请输入收货"> 
						</div>
						<div class="input">
							<span>收货电话<label></label></span>
							<input type="text" name="phone" placeholder="请输入收货电话"> 
						</div>
						<div class="input">
							<span>收货地址<label></label></span>
							<input type="text" name="address" placeholder="请输入收货地址"> 
						</div>
						<!-- 登录验证码 -->
						<div class="form-group">
						     <div class="input-icon">
						         <i class="fa fa-picture-o"></i>
						         <input class="form-control" style="width:180px;" type="text" id="verifyCode" name="verifyCode" placeholder="验证码" maxlength="4">
						         <img style="width:150px;"  src="getVerifyCode" width="110" height="34" id="verifyCodeImage" onclick="this.src=this.src+'?'+new Date()">
						     </div>
						</div>
						<div class="clearfix"> </div>
					</div>
					<div class="register-but text-center">
					   <input type="submit" value="提交">
					   <div class="clearfix"> </div>
					</div>
				</form>
				<div class="clearfix"> </div>
			</div>
	    </div>
	</div>
	<!--//account-->

	<jsp:include page="footer.jsp"/>
	<script>
		function checkpassword(){
			var i1 = document.getElementById("pw1");
			var p1 = i1.value;
			var i2 = document.getElementById("pw2");
			let p2 = i2.value;
			if (p1===p2){
				return true;
			}
			alert("两次输入的新密码不匹配，请确认新密码");
			return false;
		}
	</script>
</body>
</html>